{extend name="index/base" /}
{block name='title'}User Orders{/block}
{block name='content'}

<div class="container clearfix my-5 pb-1">
    {include file="user/leftMenu" name="MY ORDER" route="user/order"/}

    <div class="userBox">
        <div class="order-state-list">
            <a href="javascript:;" :class="{'on':listQuery.activeState=='all'}"  @click="handleCond('all')">All Orders({{total}})</a>
            <a href="javascript:;" :class="{'on':listQuery.activeState=='wait_pay'}" @click="handleCond('wait_pay')">Unpaid({{wait_pay_total}})</a>
            <a href="javascript:;" :class="{'on':listQuery.activeState=='send'}" @click="handleCond('send')">Processing({{send_total}})</a>
            <a href="javascript:;" :class="{'on':listQuery.activeState=='wait_rec'}" @click="handleCond('wait_rec')">Shipped({{wait_rec_total}})</a>
            <a href="javascript:;" :class="{'on':listQuery.activeState=='complete'}" @click="handleCond('complete')">Reviews({{complete_total}})</a>
            <a href="javascript:;" :class="{'on':listQuery.activeState=='refund'}" @click="handleCond('refund')">Refunded({{refund_total}})</a>
        </div>
        <div class="userH_box pr pt-2">
            <table class="userTable orderBox tc">
                <tr class="tr">
                    <th class="th goods">Product</th>
                    <th class="th price">Unit Price</th>
                    <th class="th quantity">Quantity</th>
                    <!--<th class="th commodity">Commodity</th>-->
                    <th class="th total">Real Payment<!-- Total Amount --></th>
                    <th class="th status">Trading Status<!-- Order Status --></th>
                    <th class="th">Operation</th>
                </tr>

                <tr class="tr">
                    <td class="nbr nbg" rowspan="1" colspan="7">
                        <div class="order_head">
                            <label class="line_checkbox pr" @click="handleAllSelected">
                                <!-- <span class="dispatch js-checkbox"></span> -->
                                <input type="checkbox" id="js_selectAll" class="logsss_event_cl"  :checked="all_selected">
                                <span style="vertical-align: text-top;">Select All</span>
                            </label>

                            <div class="fr" @click="handleDelAll">
                                <a href="javascript:;"><i class="ci-trash me-1"></i>Delete</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <template v-for="(item,index) in list" :key="index">
                    <tr class="tr"  >
                        <td class="nbr" rowspan="1" colspan="7">
                            <div class="order_head">
                                <label class="line_checkbox pr">
                                    <!-- <span class="dispatch js-checkbox"></span> -->
                                    <input type="checkbox"  class="logsss_event_cl" v-model="item.is_checked" :disabled="item.handle_action.indexOf('del')===-1">
                                    <!-- <span style="vertical-align: text-top;">Select All</span> -->
                                </label>
                                <span class="time">{{item.create_time}}</span>
                                <span class="order_no">Order Number：{{item.no}}</span>

                                <!--<a href="" class="userTable-btn">
                                    Contact Us
                                </a>-->
                            </div>
                        </td>
                    </tr>
                    <tr class="tr">
                        <td class="td goods" colspan="3">
                            <div class="cell"  v-for="(goods,goods_index) in item['goods_list']" :key="goods_index">
                                <a class="cell-goods" href="javascript:;">
                                    <div class="goods-image">
                                        <img :src="goods.img" alt="" title="">
                                    </div>
                                    <div class="goods-info">
                                        <div class="goods-title">
                                            {{goods.name}}
                                        </div>
                                        <div class="goods-sku">
                                            <span>{{goods.sku_name}}</span>
                                        </div>
                                    </div>
                                </a>
                                <div class="cell-flex">
                                    <!--<del>$46.87</del>-->
                                    <span>{$money_f}{{goods.price}}</span>
                                </div>
                                <div class="cell-flex">
                                    <span>Qty: {{goods.num}}</span>
                                </div>
                            </div>

                            <div class="cell" v-if="item.tip_money-0>0">
                                <div class="cell-row">
                                    <div class="cell-flex">
                                        <span>Tip Money</span>
                                    </div>
                                    <div class="cell-flex">
                                        <span>{$money_f}{{item.tip_money}}</span>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <!--<td class="td commodity"><div class="cell"><a href="">refund / return</a></div></td>-->
                        <td class="td total">
                            <div class="cell">
                                <span>{$money_f}{{item.pay_money}}</span>
                                <em v-if="item.freight_money-0>0">(Freight money : {$money_f}{{item.freight_money}})</em>
                            </div>
                        </td>

                        <td class="td status">
                            <div class="cell">
                                <span>{{item.status_name}}</span>

                                <a :href="'/order/detail?order_id='+item.id">Order details</a>

                                <!--<a class="text-color" href="">View logistics</a>-->
                            </div>
                        </td>

                        <td class="td">
                            <div class="cell">
                                <a :href="'/order/pay?order_id='+item.id" class="cell_btn bg-blue" v-show="item.handle_action.indexOf('pay')>-1" >Pay</a>
                                <a href="javascript:;" @click="handleOrderCond(item,'cancel')" class="cell_btn bg-orange" v-show="item.handle_action.indexOf('cancel')>-1" >Cancel</a>
                                <a href="javascript:;" @click="handleOrderCond(item,'del')" class="cell_btn bg-red"    v-show="item.handle_action.indexOf('del')>-1">Delete</a>
                                <a href="javascript:;" @click="handleOrderCond(item,'receive')" class="cell_btn bg-black"  v-show="item.handle_action.indexOf('receive')>-1">Receipt</a>
                                <a :href="'/track?num='+item.no" v-show="item.logistics && item.logistics.id>0">Track Your Order</a>
                            </div>
                        </td>

                    </tr>
                     <tr class="tr nshow">
                        <td class="nbr nbg" rowspan="1" colspan="7">                            
                        </td>
                    </tr>
                </template>


            </table>
        </div>
        <!-- Pagination-->
        <nav class="d-flex justify-content-center pt-2" aria-label="Page navigation">
            <el-pagination  background @current-change="handlePageChange" :page-size="listQuery.limit" @size-change="handlePageSizeChange"  layout="  prev, pager, next" :total="total"> </el-pagination>

        </nav>
    </div>
</div>

{/block}
{block name='script'}

<script>

    layui.extend({
    }).use([], function () {
        const order_id = "{:input('order_id')}"
        initVue({
            data: {
                listQuery:{
                    activeState: 'all',
                    id: order_id-0>0 ? order_id : undefined,
                    limit: 15,
                    page:1,
                },
                list: [],
                total: 0,
                total_page: 0,
                all_selected:false,
                wait_pay_total:0,
                send_total:0,
                wait_rec_total:0,
                complete_total:0,
                refund_total:0,
            },
            components: {

            },
            computed: {

            },
            created: function () {

            },
            mounted: function () {
                this._initData()
            },
            methods: {
                _initData:function(is_reset){
                    if(is_reset===true){
                        this.listQuery.page = 1
                    }
                    const that = this
                    this.$network('order/lists',this.listQuery).then(function(res){
                        var data = res.data || {}
                        that.total = data.total || 0
                        that.total_page = data.total_page || 0
                        that.wait_pay_total = data.wait_pay_total||0
                        that.send_total = data.send_total||0
                        that.wait_rec_total = data.wait_rec_total||0
                        that.complete_total = data.complete_total||0
                        that.refund_total = data.refund_total||0
                        that.list = (data.list ||[]).map(function(item){
                            item.is_checked = false
                            return item
                        })
                    })
                },
                handlePageSizeChange:function(limit){
                    this.listQuery.limit = limit
                    this._initData()
                },
                handlePageChange:function(page) {
                    this.listQuery.page = page
                    this._initData()
                },
                handleCond: function(activeState) {
                    this.listQuery.activeState = activeState
                    this._initData(true)
                },
                handleDelAll:function(){
                    var ids =[];
                    this.list.map(function(item){
                        if(item.is_checked){
                            ids.push(item.id)
                        }
                    })
                    if(!ids.length){
                        this.$message.error("{:lang('err_selected_del_data')}")
                        return
                    }

                    var that = this
                    this.$confirm("{:lang('tip_delete_data')}", '{:lang("tip")}',{
                        confirmButtonText: "{:lang('sure')}",
                        cancelButtonText: "{:lang('cancel')}",
                        type: 'warning'
                    }).then(function(){
                        that.$network('order/del',{id:ids}).then(function(res){

                            that.$message.success(res.msg)
                            that._initData(true)
                        })
                    })
                },
                handleOrderCond:function(item,activeState) {
                    var index = this.list.indexOf(item)
                    var confirm_content = ""
                    var url = ""
                    var that = this;
                    var fun = function(res){
                        that.$message.success(res.msg)
                        that.$set(that.list,index,Object.assign(item,res.data||{}))
                    }
                    if(activeState==='del'){
                        url = "order/del"
                        confirm_content ="{:lang('tip_order_del')}"
                        fun = function (res){
                            that.list.splice(index,1)
                        }
                    }else if(activeState==='cancel') {
                        url = "order/cancel"
                        confirm_content ="{:lang('tip_order_cancel')}"
                    }else if(activeState==='receive') {
                        url = "order/receive"
                        confirm_content ="{:lang('tip_order_receive')}"
                    }else{
                        that.$message.error("{:lang('err_data')}"+":"+activeState)
                        return
                    }
                    this.$confirm(confirm_content, '{:lang("tip")}',{
                        confirmButtonText: "{:lang('sure')}",
                        cancelButtonText: "{:lang('cancel')}",
                        type: 'warning'
                    }).then(function(){
                        that.$network(url,{id:item.id }).then(function(res){
                            fun(res)

                        })
                    })
                },
                handleAllSelected:function() {
                    this.all_selected = !this.all_selected
                    this.list.map(function(item){
                        if(item.handle_action.indexOf('del')>-1){
                            item.is_checked = this.all_selected
                        }
                    },this)
                },
            },
        })


    })

</script>

{/block}